<template>
	<view class="tCenter w100">
		<view class="tCenter" v-if="!door&&showtext">
			<view class="tCenter pT20 pB20">
				<icon v-if="showico" type="success" color='#09BB07' size="60"/>
				<img v-if="!showico" class="w20" src="../../static/img/news.png" ></img>
				<!-- <img class="w20" src="../../static/img/news.png" ></img> -->
			</view>
			<view class="f16" >{{showtext}}</view>				
		</view>
		<view class="signin" v-if="door">
			<view class=" f14 border">
				<view class="input-row bg_white" style="align-items: baseline;">
					<text class="title">签到类型：</text>
					<view class="uni-textarea tab w70 tLeft" >
						<label class="radio" @click="chooseradio('o')"><radio value="r1"  :checked="radiostate==='o'" />上班</label>
						<label class="radio mL10" @click="chooseradio('l')"><radio value="r2"  :checked="radiostate==='l'" />下班</label>		
					</view>
					<view class="w15"></view>
				</view>
			</view>
			
			<view class="btn-row w70 mauto"><button type="primary" class="primary f16 " @tap="signin">签到</button></view>
		</view>
		<view class="an-top-bg" style="background: #fbf9fe" v-if="visterlistchanger">
			<!-- <nodata v-if="visterlist.length==0"></nodata> -->
			<!-- 用户信息 -->
			<mescroll-uni ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption" :up="upOption" >
			
			<view class="an-userInfo mT10 p5" v-for="(item,index) in visterlist">
				<view class="an-user-image m10 mT20"><image style="width: 100%; height: 100%; background-color: #eeeeee;" mode="aspectFit" :src="item.vister_headimgurl?item.vister_headimgurl:'../../static/img/user.png'" @error="imageError"></image></view>
				<view class="an-user-text w20">
					<view class="mT30" style="color: black;">
						<h3>{{item.vister_name}} </h3>
						<p>访客电话：</p>
						<p>受访公司：</p>
						<p>受访部门：</p>
						<!-- <p>受访人：</p> -->
						<p>预约时间：</p>
						<p>受访位置：</p>
					</view>
					
				</view>
				<view class="cc-view pL10"> 
					<button :class="item.status==0?'cc':'bg_8e8e col_black mR10'">{{checkappstatus(item)}}</button>
					<view class="phone-number col_black">
						{{item.vister_mobile?item.vister_mobile:'-'}}
					</view>
					<view class="host-company col_black">
						{{item.app_company_name?item.app_company_name:'-'}}
					</view>
					<view class="host-department col_black">
						{{item.app_dept_name?item.app_dept_name:'暂无'}}
					</view>
					<!-- <view class="interviewee">
						李晓东
					</view> -->
					<view class="ontime col_black">
						<!-- {{item.visittime}} -->
						{{retime(item.app_visittime)}}
					</view>
					<view class="location-visited col_black">
						{{item.app_address}}
					</view>
					<view class="details col_black" @click="details(item)">
						{{checkapparrivestatus(item)}}
					</view>
				</view>
				
			</view>
			</mescroll-uni>
			
		</view>
		
		<backhome></backhome>
		<!-- 加载动画 -->
		<loading v-if="!isloading()"></loading>
	</view>
</template>

<script>
	import {arriveconfirm,arriveconfirm_code,clockclick} from '../../common/api/appointment.js'; //引进requst方法
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	import backhome from '@/components/backhome.vue';
	import {timestampToTime} from "@/common/common.js";
	 import {userinfo} from '@/common/api/user.js'
	export default {
		mixins: [MescrollMixin], // 使用mixin
		components: {
			backhome
		},
		data() {
			return {
				companyid:"",
				showtext:'',
				deptid:[],
				id:"",
				departname:"",
				visterlist:[],
				visterlistchanger:false,
				showico:false,
				count:0,
				page:1,
				offset:0,
				length:10,
				requestchanger:true,
				statuschanger:true,
				downOption:{
					auto: false
				},
				upOption:{
					auto:false
				},
				/*0-到达，1-离开*/
				arrive_status:0,
				verif:"",
				door:'',
				radiostate:'o',
				userinfodata:'',
				
			};
		},
		methods: {
			chooseradio(type){
				this.radiostate='';
				this.radiostate=type;
			},
			details(item){
				let arrive_tips = ""
				this.arrive_status == 1?arrive_tips = "确认访客离开":arrive_tips = "确认访客到达"
				let requestData = {
					/*访客uid*/
					uid:item.vister_uid,
					deptid:item.deptid,
					companyid:item.companyid,
					url:''
				}
				if(this.arrive_status == 1){
					requestData = {
						/*访客uid*/
						uid:item.vister_uid,
						deptid:item.deptid,
						companyid:item.companyid,
						url:'',
						type:'leave'
					}
					
				}

				uni.showModal({
				    title: arrive_tips,
				    // content: '确认访客到达',
				    success: function (res) {
				        if (res.confirm) {
							arriveconfirm(requestData).then(res=>{
							
								// this.app_info.meettime =  Date.parse(new Date())/1000;
								this.showico=true;
								uni.showToast({
								    title: '代签成功',
								    duration: 2000,
									icon:'none'
								});
								setTimeout(function(){
									uni.reLaunch({
									    url: '../yaoqing/yaoqinglist'
									});
								},2500)
							console.log(1)
								
							})
				            console.log('用户点击确定');
				        } else if (res.cancel) {
				            console.log('用户点击取消');
				        }
				    }
				});
				
			},
			retime(val){
				return timestampToTime(val)
			},
			checkapparrivestatus(item){
				if(item.arrive_status == 2){
					this.arrive_status = 0
					return "确认到达"
				}
				if(item.arrive_status == 3){
					this.arrive_status = 1
					return "确认离开"
				}
				console.log(item) 
			},
			checkappstatus(item){
				return 
			},
			/*下拉刷新的回调*/
				downCallback(){
					this.page=1;
					if(this.count == this.visterlist.length){
						this.requestchanger = false
						this.mescroll.endSuccess()
						return
					}
					this.ladingdata();		
				
				},
			/*上拉加载的回调*/
				upCallback(page) {
					console.log(page)
					this.mescroll.endSuccess(this.visterlist.length, this.requestchanger);
					this.page++;
					this.ladingdata();	
				// 与 mescroll-body 的处理方式一致 > 
				},
				ladingdata(){
					console.log(this.userinfo)
					return 
					arriveararrived({
						companyid:this.companyid,
						
						uid:this.userinfo.id,
						type:'list',
						offset:this.offset,
						length:this.length
					}).then(res=>{
						
						if(res.data.code==400){
							this.requestchanger = false
							return
							}	
						console.log(res)
						if(res.data.data){
							var newResult=res.data.data
							this.offset = res.data.data.length
							this.count = res.data.count
							// this.getlist=res.data.data;
							this.mescroll.endSuccess();
							 if (newResult.length == 0 || newResult.length < 10) {
								 this.allLoaded = true;
							 }
							 if (this.page != 1) {
								 newResult = this.getlist.concat(newResult);
							 }
							 for (let i = 0; i < newResult.length; i++) {
							 	this.grids.push(newResult[i])
							 }
							 this.offset = this.grids.length
							 // this.grids = newResult;
						 }
						
					})
				},
			signin(){
				clockclick({deptid:this.deptid,companyid:this.companyid,'address':this.door,'ctype':this.radiostate}).then(res=>{
					console.log(res)
					uni.showModal({
					    title: '',
					    content: res.data.message,						
						showCancel:false,
						confirmText: "确定",
					    success: function (ress) {
					        if (ress.confirm) {
					            console.log('用户点击确定');								
								if(res.data.code=='200'){
									uni.reLaunch({
										url: "/pages/user/user?type=2"
									});	
								}
								
					        } else if (ress.cancel) {
					            console.log('用户点击取消');
					        }
					    }
					});
					
				})
			},
			showdata(){
				let userid=uni.getStorageSync('userid');
				console.log()
				arriveconfirm({deptid:this.deptid,companyid:this.companyid,'verif':this.verif}).then(res=>{
					console.log(res)
					if(res.data.code == 200 && res.data.requestTime){
						this.visterlist = res.data.data
						this.visterlistchanger = true
						this.showtext='请确认以下访客到达信息.';
						// for (let i = 0; i < 10; i++) {
						// 	this.visterlist.push(this.visterlist[0])
						// }
						
						return
					}
					if(res.data.code=='200'){
						this.showtext=res.data.message;
					}else{
						this.showtext=res.data.message;
					}
				})
				
				// 到达部门接口
				// arriveconfirm_code({uid:userid,companyid:this.companyid}).then(res=>{
				// 	console.log(res)
				// })
			},
		},
		onLoad(event) {
			if(event.deptid){
				this.deptid=event.deptid
			}
			
			if(event.verif){
				this.verif=event.verif
			}
			
			if(event.companyid){
				this.companyid=event.companyid
			}
			
			if(!this.isloading()){
				return
			}
				
			if(event.door){
				this.door=event.door;
				userinfo({}).then(resuser=>{//获取用户信息
					this.userinfodata=resuser.data.data;
					if(resuser.data.data.work_status=='1'){//work_status 1-上班状态 2下班状态
						this.radiostate='l';
					}else{
						this.radiostate='o';
					}
				})
			}else{
				this.showdata();
			}
			
			// return
			// try {
			// 	this.detaildata = JSON.parse(decodeURIComponent(event.detailDate));
			// 	console.log(this.detaildata);
			// } catch (error) {
			// 	this.detaildata = JSON.parse(event.detailDate);
			// 	console.log(this.detaildata);
			// }
			// this.id = this.detaildata.deptid;
			// this.departname=this.detaildata.departname;			
		},
	}
</script>

<style lang="scss">
	.an-top-bg{
		.an-userInfo{
			background-color: #FFFFFF;
			
		}
	.cc-view{
	text-align: right;
	margin-top: 60px;
	color: #000;
	width: 60%;
	}
	.details{
		width: 77px;
			height: 30px;
			color: #fff;
			background-color: #007aff;
			border-radius: 18px;
			font-size: 15px;
			line-height: 30px;
			text-align: center;
			margin-left: auto;
			margin-top: 5px;
			margin-bottom: 5px;
	}
}
.top-tips{
	margin-top: 20px;
}
</style>
